<template>
  <el-dialog ref="wkDialog" v-model="dialogVisible"
             :append-to-body="true" :close-on-click-modal="false"
             title="常用语管理"
             width="600px"
             @close="close">
    <div class="set">
      <!-- draggable 中的item插槽中只能有一个item-->
      <draggable v-model="setList" item-key="value"
                 :options="{ group: 'list',forceFallback:false, fallbackClass:'draggingStyle',filter: '.el-input__inner', preventOnFilter: false }">
        <template v-slot:item="{element, index}">
          <div>
            <flexbox :class="{ 'is-drag': isDrag }" class="set-item">
              <el-input v-model="element.value" :maxlength="100">
                <template v-slot:suffix>
                  <div class="drag-handle" @mouseenter="dragEnter" @mouseleave="dragLeave">⋮⋮</div>
                </template>
              </el-input>
              <i class="el-icon-remove" @click="deleteClick(index)"/>
            </flexbox>
          </div>
        </template>
      </draggable>
      <el-button link icon="el-icon-circle-plus" @click="addClick">添加常用语</el-button>
    </div>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button v-debounce="sureClick" type="primary">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script setup>
import {watch, ref, computed, onMounted} from "vue"
import {sysConfigSetPhraseAPI} from "@/api/crm/common.js";
import draggable from 'vuedraggable'
import {ElMessage} from "element-plus"

defineOptions({
  // 常用语设置
  name: 'Set',
})

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  list: Array
})
const emits = defineEmits(['update:visible', 'update'])


const loading = ref(false)
const setList = ref([])
const isDrag = ref(false)
const dialogVisible = ref(false)

watch(() => props.list, () => {
      initInfo()
    },
    {

      immediate: true
    })

// todo whf watch如果监视对象中的key，比如props中的visible，需要使用getter函数返回的形式
watch(() => props.visible, (value) => {
  dialogVisible.value = value
  if (value) {
    initInfo()
  }
})

function initInfo() {
  console.log("props.list", props.list)
  let index = 0;
  setList.value = props.list.map(item => {
    return {value: item}
  })

  if (setList.value.length == 0) {
    setList.value = [{value: ''}]
  }
}

/**
 * 取消选择
 */
function close() {
  emits('update:visible', false)
}

function addClick() {
  setList.value.push({value: ''})
}

function deleteClick(index) {
  setList.value.splice(index, 1)
}

function sureClick() {
  const value = []
  for (let index = 0; index < setList.value.length; index++) {
    const element = setList.value[index]
    if (element.value) {
      value.push(element.value)
    }
  }

  if (value.length == 0) {
    // .$message.error('请输入常用语')
    ElMessage.error({message: '请输入常用语'})
    return
  }

  loading.value = true
  sysConfigSetPhraseAPI(value).then(res => {
    loading.value = false
    emits('update', value)
    close()
  }).catch(() => {
    loading.value = false
  })
}

/**
 * 拖动样式
 */
function dragEnter() {
  isDrag.value = true
}

function dragLeave() {
  isDrag.value = false
}
</script>

<script>
import ElDialogLoadingMixin from '/src/mixins/ElDialogLoading.js'

export default {
  mixins: [ElDialogLoadingMixin],
}
</script>

<style lang="scss" scoped>
.set {
  padding: 8px;
  height: 30vh;
  overflow-y: auto;
}

.set-item.is-drag {
  :deep(input) {
    background-color: #f8f8f8;
  }

  .el-icon-remove {
    visibility: hidden !important;
  }
}

.set-item {
  margin-bottom: 10px;

  .el-input {
    flex: 1;
  }

  .el-icon-remove {
    visibility: hidden;
    color: #ff6767;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
  }

  .drag-handle {
    padding: 0 8px;
    flex-shrink: 0;
    color: #333;
    cursor: move;
    margin-top: 9px;

    &:hover {

    }

    // visibility: hidden;
  }

  &:hover {
    .el-icon-remove {
      visibility: visible;
    }

    .drag-handle {
      visibility: visible;
    }
  }
}
</style>
